<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>{BEESCRM:$title}</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/assets/schoolirs/css/load.css">
    <link rel="stylesheet" href="/assets/schoolirs/css/index.css">
    <link rel="stylesheet" href="/assets/schoolirs/css/sweet-alert.css">
</head>
<body>
<div class="wraper balcony">
    <input type="hidden" id="irs_id" value="{BEESCRM:$res_id}">
    <div class="load">
        <img class="load-bee" src="/assets/schoolirs/images/load-bee.png"/>
    </div>
    <div class="top">
        <a onclick="javascript:history.go(-1);" class="iconfont icon-zuo pull-left"></a>
        <span class="store-name pull-left">预定包厢</span>
        <a href="javascript:void(0)"> </a>
    </div>

    <div class="order-info">
        <div class="form-box">
            <div class="form-list" style="border: none;margin-bottom: 10px">
                <select name="chose_balcony_time" id="chose_balcony_time">
                    <option value="0" <if condition = "0 eq $chose_time">selected="selected"</if>>请选择用餐时长</option>
                    <option value="30" <if condition = "30 eq $chose_time">selected="selected"</if>>30分钟</option>
                    <option value="60" <if condition = "60 eq $chose_time">selected="selected"</if>>60分钟</option>
                    <option value="90" <if condition = "90 eq $chose_time">selected="selected"</if>>90分钟</option>
                    <option value="120" <if condition = "120 eq $chose_time">selected="selected"</if>>120分钟</option>
                </select>
                <span class="triangle"></span>
            </div>
        </div>
    </div>

    <input type="hidden" value="{BEESCRM:$res_id}" id="res_id">
    <input type="hidden" value="{BEESCRM:$order_id}" id="order_id">
    <input type="hidden" value="{BEESCRM:$pay_type}" id="pay_type">
    <input type="hidden" value="{BEESCRM:$window_id}" id="window_id">
    <div class="room clearfix" id="balconyBox">
        <volist name="balconys" id="vo">
            <a href="#" class="room-list text-12" data-id="{BEESCRM:$vo.balcony_id}">
                <div class="room-img">
                    <img src="{BEESCRM:$vo.balcony_img}"/>
                    <span class="label text-center">{BEESCRM:$vo.number}人桌</span>
                </div>
                <p class="text-center">{BEESCRM:$vo.balcony_name}
                    <if condition="$hasOrderBalcony eq 0">
                        <span class="iconfont  text-green"></span>
                    </if>
                    <if condition="$hasOrderBalcony eq 1">
                        <if condition="$vo.balcony_id eq $balconyId">
                            <span class="iconfont icon-checked text-green"></span>
                        <else />
                            <span class="iconfont  text-green"></span>
                        </if>

                    </if>
                </p>
            </a>
        </volist>
    </div>
    <if condition="$hasOrderBalcony eq 1">
        <input type="hidden" value="2" id="oprate_method">
    </if>
    <if condition="$hasOrderBalcony eq 0">
        <input type="hidden" value="1" id="oprate_method">
    </if>
    <input type="hidden" value="{BEESCRM:$balconyId}" id="balconyId">
    <div class="btn-box">
        <a href="javascript:void(0)" class="btn green-btn" id="choseSure">确定</a>
    </div>
</div>
<include file="../commonJS"/>
<script src="/assets/schoolirs/js/jquery-2.1.0.min.js"></script>
<script src="/assets/base/repair/js/sweetalert/lib/sweet-alert.min.js"></script>

<script>
    $(window).load(function(){
        $('.load').hide();

        var img_w = $('.room-img').width();
        $('.room-img img').css('height',img_w);
    });
    var res_id = $("#res_id").val();
    var order_id = $("#order_id").val();
    var pay_type = $("#pay_type").val();
    $(function(){

        $('.room').on('click', 'a', function (e) {
            e.preventDefault();

            $('#balconyId').val($(this).data('id'));

            var links =document.getElementById("balconyBox").getElementsByClassName("iconfont");

            for (var j = 0; j < links.length; j++){
                if($(this).index()!=j){
                    $(links[j]).removeClass('icon-checked');
                }
            }
            var item = $(this);
            if($(this).find('p span').hasClass("icon-checked")){
                $('#oprate_method').val(3);
                $(this).find('p span').removeClass('icon-checked');


            }else {
                $('#oprate_method').val(2);
                $(this).find('p span').addClass('icon-checked');
            }

        });

        $('#choseSure').click(function () {
            var time= $("#chose_balcony_time option:selected").val();
            var oprate_method = $('#oprate_method').val();
            var blacony_id = $('#balconyId').val();

            if(!oprate_method){
                fm.alert('参数错误');
                return;
            }
            if(!blacony_id){
                fm.alert('请选择包厢');
                return;
            }
            if(oprate_method==1){
                fm.alert('未选中任何包厢');
                return;
            }
            if(oprate_method==2){
                if (time==0){
                    fm.alert('请选择包厢时间');
                    return;
                }
                sureChose(time,blacony_id);
            }
            if(oprate_method==3){
                cancelChose(blacony_id);
            }
        });

        function removeClass(item) {
            $(item).find('p span').removeClass('icon-checked');
        };
        function addClass(item) {
            $(item).find('p span').addClass('icon-checked');
        };



        function cancelChose(balconyId) {

            var data = {};
            data.order_id = order_id;
            data.pay_type = pay_type;
            data.balcony_id = balconyId;


            $.ajax({
                'url': '/Schoolirs/Order/cancelChoseBalcony?res_id='+res_id,
                'data': data,
                'dataType':'json',
                'type': 'POST',
                'async': false,
                success: function(data) {
                    if (data.status == 'S') {
                        location.href = data.uri;
                    } else{
                        fm.alert(data.message);
                        return false;
                    }
                }
            });
        };
        function sureChose(time,balconyId) {

            var data = {};
            data.order_id = order_id;
            data.pay_type = pay_type;
            data.balcony_id = balconyId;
            data.end_time = time;

            $.ajax({
                'url': '/Schoolirs/Order/sureBalcony?res_id='+res_id,
                'data': data,
                'dataType':'json',
                'type': 'POST',
                'async': false,
                success: function(data) {
                    if (data.status == 'S') {
                        location.href = data.uri;
                    } else{
                        fm.alert(data.message);
                        return false;
                    }
                }
            });
        };

    });

</script>

<script>
    var window_id = $('#window_id').val();
    $('#chose_balcony_time').on('change',function(){
        if (!window_id||!order_id){
            fm.alert('参数错误');
        }
        var time= $(this).val();
        var data = {};
        data.order_id = order_id;
        data.window_id = window_id;
        data.time = time;
        if (time){
            getFreeBalcony(data);
        }
    });
    function getFreeBalcony(data) {

        $.ajax({
            'url': '/Schoolirs/Order/ajaxGetFreeBalcony?res_id='+res_id,
            'data': data,
            'dataType':'json',
            'type': 'POST',
            'async': false,
            success: function(res) {
                if (res.status == 'S') {
                    $("#balconyBox").empty();
                    $("#balconyBox").append(res.data.content);
                } else{
                    fm.alert(res.message);
                    return false;
                }
            },
            errors:function () {
                fm.alert('出错了');
                return false;
            }
        });
    }

</script>

</body>
</html>
